<template>
  <view class="item">
    <view class="title">
      <view class="shopname">订单号：{{ item.mchOrderNo || '未知' }}</view>
      <view class="paytype">{{ ordersta(item.payType) }}</view>
    </view>
    <view class="vipinfo">
      <view class="header">
        <image class="head" :src="item.orderMemberBO.avatarUrl || '../../static/head.png'" mode="" />
        <image class="V" src="../../static/logo.png" />
      </view>
      <view>
        <view class="username">{{ item.orderMemberBO.name }}</view>
        <view class="phone">手机号：{{ item.orderMemberBO.mobile }}</view>
        <view class="phone">会员ID：{{ item.orderMemberBO.mchMemberNo }}</view>
      </view>
    </view>
    <view class="botm">
      <view class="time l">购买时间：{{ item.createdDate }}</view>
      <view class="good_pay">实际付款：￥{{ item.payAmount }}</view>
    </view>
    <view class="good_btn" @click="todel(item.id, item)">查看详情</view>
  </view>
</template>

<script lang="ts" setup>
import { ordersta } from '@/utils/utils';
import { to } from '@/utils/uniapi';
interface Item {
  id: string;
  payType: string;
  orderMemberBO: { avatarUrl: string; name: string; mobile: string; id: string };
  modifiedDate: string;
  payAmount: string;
}
defineProps<{
  item: Item;
}>();
function todel(id: any, item: any) {
  const memberId = JSON.stringify(item.orderMemberBO);
  const deskNo = item.deskNo;
  to('/dj/order/order?id=' + id + '&memberId=' + memberId + '&deskNo=' + deskNo);
}
</script>

<style scoped>
.item {
  width: 710rpx;
  /* height: 608rpx; */
  background: #ffffff;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  opacity: 1;
  margin: 24rpx auto;
  padding: 16rpx 40rpx 30rpx 14rpx;
  box-sizing: border-box;
  box-shadow: 0rpx 4rpx 10rpx rgba(10, 14, 20, 0.05);
}
.title {
  width: 656rpx;
  padding-bottom: 8rpx;
  margin: 0 auto;
  display: flex;
}
.shopname {
  font-size: 24rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #111827;
  flex: 1;
}
.paytype {
  margin-left: auto;
  font-size: 24rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #111827;
}
.vipinfo {
  width: 100%;
  font-size: 26rpx;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx dashed #cbcaca;
  border-bottom: 1rpx dashed #cbcaca;
  padding: 14rpx 0;
  font-size: 20rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}
.header {
  position: relative;
}
.V {
  width: 26rpx;
  height: 26rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.head {
  width: 98rpx;
  height: 98rpx;
  background: #707070;
  border-radius: 50%;
  margin-right: 26rpx;
}
.botm {
  display: flex;
  margin-top: 20rpx;
}
.time {
  font-size: 16rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  line-height: 28rpx;
}
.good_pay {
  font-size: 24rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
  margin-left: auto;
}
.good_btn {
  overflow: hidden;
  margin-top: 8rpx;
  font-size: 20rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  width: 138rpx;
  height: 48rpx;
  background: #c32136;
  border-radius: 40rpx;
  text-align: center;
  line-height: 48rpx;
  margin-left: auto;
  margin-top: 22rpx;
}
</style>
